<template>
  <div class="box">
    <div class="nav">
      <div class="left">
        <van-icon name="arrow-left" @click="$router.back()" />
      </div>
      <div class="center">设置密码</div>
      <div class="right">跳过</div>
    </div>
    <div class="center">
      <form>
        <p :class="{ active: active == 1 }">
          <input
            type="text"
            name=""
            id=""
            placeholder="请输入手机号"
            v-model="form.mobile"
          />
        </p>
        <p :class="{ active: active == 1 }">
          <input
            type="text"
            name=""
            id=""
            placeholder="请输入验证码"
            @blur="active = ''"
            @focus="active = 1"
            v-model="form.sms_code"
          />
          <span class="code" @click="sendCode" v-if="flag == false"
            >获取验证码</span
          >
          <span class="code" v-if="flag == true">获取验证码{{ timer }}</span>
        </p>
        <p :class="{ active: active == 4 }">
          <input
            type="text"
            name=""
            id=""
            placeholder="修改密码"
            v-model="form.password"
          />
        </p>
      </form>
      <button class="btn" @click="btnPassword">提交</button>
    </div>
  </div>
</template>
<script>
const reg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
import { Editpassword, smsLogin } from "../tool/login";
export default {
  data() {
    return {
      active: "",
      timer: 6,
      flag: false,
      form: {
        password: "",
        mobile: "",
        sms_code: "",
        sms_type: "login",
        type: 2,
        client: 1,
      },
    };
  },
  methods: {
    // 获取验证码
    async sendCode() {
      if (!reg.test(this.form.mobile)) {
        this.$Toast.fail("不是手机号");
      } else {
        this.flag = true;
        let res = await smsLogin(this.form);
        console.log(res);
        let a = setInterval(() => {
          if (this.timer < 2) {
            this.flag = false;
            this.timer = 6;
            clearInterval(a);
          } else {
            this.timer--;
          }
        }, 1000);
      }
    },
    // 修改密码
    async btnPassword() {
      let res = await Editpassword(this.form);
      console.log(res);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 75px;
    height: 75px;
    font-size: 25px;
    border-bottom: 8px solid #f3f3f3;
    .left {
      font-size: 30px;
    }
    .right {
      color: gainsboro;
    }
  }
  .center {
    padding: 0 40px;
    form {
      p {
        display: flex;
        justify-content: space-between;
        line-height: 1.33rem;
        font-size: 0.373rem;
        border-bottom: 3px solid #f3f3f3;
        input {
          border: none;
        }
        .code {
          color: #ef8236;
        }
      }
    }
    .alert {
      display: flex;
      justify-content: space-between;
    }
    .btn {
      width: 100%;
      height: 65px;
      line-height: 65px;
      color: white;
      background-color: #fd6613;
      text-align: center;
      border-radius: 50px;
      font-size: 20px;
      margin-top: 50px;
      border: none;
    }
  }

  .active {
    border-bottom: 1px solid #ef8236;
  }
}
.YanZhengMa {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>